<template>
    <el-dialog :title="dialogTitle" :visible="dialogVisible" width="35%" :before-close="beforeClose">
        <el-form :model="newForm" ref="depForm" :rules="depRules" label-width="80px">
            <el-form-item label="客户名称" prop="name">
                <el-input v-model="newForm.name" placeholder="请输入客户名称"/>
            </el-form-item>
            <el-form-item label="客户年龄" prop="age">
                <el-input v-model="newForm.age" placeholder="请输入客户年龄"/>
            </el-form-item>
            <el-form-item label="客户性别" prop="gender">
                <!--<el-input v-model="depForm" placeholder="请输入客户性别"/>-->
                <el-select v-model="newForm.gender" style="width: 100%;">
                    <el-option
                            v-for="(gender, index) in genders"
                            :label="gender"
                            :key="index"
                            :value="index"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="客户电话" prop="tel">
                <el-input v-model="newForm.tel" placeholder="请输入客户电话"/>
            </el-form-item>
            <el-form-item label="客户QQ" prop="qq">
                <el-input v-model="newForm.qq" placeholder="请输入客户QQ"/>
            </el-form-item>
            <el-form-item label="客户工作" prop="job">
                <el-select v-model="newForm.job" style="width: 100%;">
                    <el-option
                            v-for="job in jobs"
                            :label="job.title"
                            :key="job.id"
                            :value="job.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="客户来源" prop="source">
                <el-select v-model="newForm.source" style="width: 100%;">
                    <el-option
                            v-for="source in sources"
                            :label="source.title"
                            :key="source.id+source.title"
                            :value="source.id">
                    </el-option>
                    <!--<el-option-->
                            <!--v-for="job in jobs"-->
                            <!--:label="job.title"-->
                            <!--:key="job.id"-->
                            <!--:value="job.id"-->
                    <!--&gt;-->
                    <!--</el-option>-->
                </el-select>
            </el-form-item>
            <el-form-item label="销售人员" prop="seller">
                <el-select v-model="newForm.seller" style="width: 100%;">
                    <el-option
                            v-for="seller in mktLists"
                            :label="seller.name"
                            :key="seller.id"
                            :value="seller.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>

        </el-form>
        <div class="dialog-footer" slot="footer">
            <el-button type="primary" @click="saveDep()">保存</el-button>
            <el-button @click="beforeClose()">取消</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {
        addPCustomerApi,
        updatePCustomerApi,
        getSysDictionaryItemsApi
    } from "@/request/api";

    export default {
        name: "eCustomerDialog",
        props: ['dialogTitle', 'editID', 'departments', 'departments', 'mktLists', 'dialogVisible', 'depForm'],
        data() {
            return {
                genders: ['男', '女'],
                sources: [],
                jobs: [],
                newForm: {},
                depRules: {
                    name: [
                        {required: true, message: '请输入客户名称', trigger: 'blur'}
                    ],
                    age: [
                        {required: true, message: '请输入客户年龄', trigger: 'blur'}
                    ],
                    gender: [
                        {required: true, message: '请选择客户性别', trigger: 'blur'}
                    ],
                    tel: [
                        {required: true, message: '请输入客户电话', trigger: 'blur'}
                    ],
                    qq: [
                        {required: true, message: '请输入客户QQ', trigger: 'blur'}
                    ],
                    job: [
                        {required: true, message: '请选择客户工作', trigger: 'blur'}
                    ],
                    source: [
                        {required: true, message: '请选择客户来源', trigger: 'blur'}
                    ],
                    seller: [
                        {required: true, message: '请输入销售人员', trigger: 'blur'}
                    ]
                }
            }
        },
        watch: {
            depForm(val) {
                if (!val) return
                return this.$set(this, 'newForm',{...val})
            }
        },
        methods: {
            beforeClose() {
                this.$emit('beforeClose')
                this.$refs['depForm'].resetFields()
            },
            saveDep() {
                this.$refs['depForm'].validate(valid => {
                    if (valid) {

                        if (this.dialogTitle === '客户添加') {
                            addPCustomerApi({
                                name: this.newForm.name,
                                age: this.newForm.age,
                                gender: this.newForm.gender,
                                tel: this.newForm.tel,
                                qq: this.newForm.qq,
                                job: {
                                    id: this.newForm.job
                                },
                                seller: {
                                    id: this.newForm.seller
                                },
                                source: {
                                    id: this.newForm.source
                                }
                            }).then(res => {
                                if (res.success === true) {
                                    this.$refs['depForm'].resetFields()
                                    this.$emit('beforeClose', true)
                                }
                            })
                        } else if (this.dialogTitle === '客户编辑') {
                            updatePCustomerApi({
                                id: this.editID,
                                name: this.newForm.name,
                                age: this.newForm.age,
                                gender: this.newForm.gender,
                                tel: this.newForm.tel,
                                qq: this.newForm.qq,
                                status: 0,
                                job: {
                                    id: this.newForm.job
                                },
                                seller: {
                                    id: this.newForm.seller
                                },
                                source: {
                                    id: this.newForm.source
                                }
                            }).then(res => {
                                if (res.success === true) {
                                    this.$refs['depForm'].resetFields()
                                    this.$emit('beforeClose', true)
                                }
                            })
                        }

                    } else {
                        return false;
                    }
                })

            }
        },
        async created() {
            // 职业
            getSysDictionaryItemsApi({
                currentPage: 1,
                pageSize: 1000,
                parentId: 1
            }).then(res => {
                if (res.success === true) {

                    this.jobs = res.data.list
                    console.log(this.jobs)
                }
            })

            // Promise.all([
            // 客户来源
            let source1 = await getSysDictionaryItemsApi({
                currentPage: 1,
                pageSize: 1000,
                parentId: 2
            });
            // 来源
            let source2 = await getSysDictionaryItemsApi({
                currentPage: 1,
                pageSize: 1000,
                parentId: 16
            })


            this.sources = [...source1.data.list, ...source2.data.list]
            console.log(this.sources)
            // ]).then(res => {
            //     if (res[0].success === true && res[1].success === true) {
            //
            //         this.sources = [...res[0].data.list, ...res[1].data.list]
            //     }
            // })
        }
    }
</script>

<style scoped>

</style>